<template>
  <div class="tally">
    <div class="header">
      <van-nav-bar title="记一笔" left-arrow @click-left="$router.back()" />
    </div>
    <div class="contain">
      <van-tabs>
        <van-tab title="支出">
          <van-field
              placeholder="点击下方小键盘输入金额"
              readonly
              clickable
              :value="value"
          />
          <van-number-keyboard
              v-model="value"
              :show="show"
              theme="custom"
              extra-key="."
              close-button-text="完成"
              @close="onInput"
          />
          <div class="type" ><span v-if="type===''">请选择支出类别：</span>支出类别：{{type}}</div>
          <div class="payTag">
            <div v-for="item in this.$store.state.tagList" :key="item.type" @click="checkTag(item)">
              <span :class=item.class></span>
              <span>{{item.type}}</span>
            </div>
            <div style="color: rgb(23 116 255)" @click="$router.push({name:'addTag'})">
              <span><van-icon name="plus" /></span>
              <span>添加类别</span>
            </div>
          </div>
          <!--日期选择器-->
          <van-cell title="选择记录日期" :value="date" @click="dateShow = true" />
          <van-calendar v-model="dateShow" @confirm="onConfirm" :min-date="new Date('1970/01/01')" :max-date="new Date()"/>
          <!--备注-->
        </van-tab>

        <van-tab title="收入">
           <van-field
              placeholder="点击下方小键盘输入金额"
              readonly
              clickable
              :value="income"
          />
          <van-number-keyboard
              v-model="income"
              :show="show"
              theme="custom"
              extra-key="."
              close-button-text="完成"
              @close="incomeInput"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "tally",
  data() {
    return{
      income: '',
      value: '', // 金额
      show: true,
      date: '', // 记录时间
      dateShow: false,
      remark: '', // 备注
      type: '', // 选中的支出类别名称
      class: '', // 选中的支出类别的iconfont 样式名，这个其实可以不用存进支出列表中，通过type查询标签列表中取出class也可以。
      sort: '' // 传入时间作为展示排序的序号
    }
  },
  computed: {

  },
  created() {
    this.$store.commit('initTagList')
  },
  mounted() {
    // this.saveTagPayList()
  },
  methods: {
    // 插入一条支出记录
    onInput () {
      // console.log('value:',this.value,'date:',this.date,'remark:',this.remark,'type:',this.type,'class:',this.class)
      if (this.value === '') {
        Toast.fail('金额不能为空');
      } else if (this.type === '') {
        Toast.fail('请选择支出类别');
      } else if (this.date === '') {
        Toast.fail('请选择时间');
      } else {
        this.$store.commit('saveDataSource',
            {
              tagName: [
                {
                  type: this.type,
                  class: this.class,
                  money : +this.value,
                  notes: this.remark,
                }
              ],
              date: this.date,
              amount: +this.value,
              sort: this.sort
            })
        Toast.success('记录成功')
        this.$router.back()
      }
    },
    checkTag(val) {
      // console.log(val)
      this.type = val.type
      this.class = val.class
    },
    // 格式化日期函数
    formatDate(date) {
      // console.log(date)
      let month = date.getMonth() + 1;
      month = month >= 10 ? month : '0' + month
      let today = date.getDate()
      today = today >= 10 ? today : '0' + today
      return `${date.getFullYear()}-${month}-${today}`;
    },
    // 确认选择日期后格式化日期，将选中时间转换为秒数用作排序（首页查看支出列时按时间排序）
    onConfirm(date) {
      this.dateShow = false;
      this.sort = Date.parse(date)
      // console.log(this.sort)
      this.date = this.formatDate(date);
    },
    // 将支出记录存入vuex和本地（感觉操作有点多余，感觉在vue实例销毁前将vuex存一次本地就可以，但是暂时没去深入研究）
    incomeInput() {
      this.$store.commit('setIncome',this.income)
      Toast.success('记录成功')
      this.$router.back()
    },
    // saveTagPayList() {
    //   let list
    //   let month = new Date().getMonth() + 1
    //   month = month>= 10 ? new Date().getMonth() + 1 : '0' + month
    //   let date = `${new Date().getFullYear()}-${month}`
    //   list = this.$store.state.payList.filter((item) =>{
    //     return item.date.slice(0,7) == date
    //   })
    //   let tagList = new Map()
    //   list.forEach((item) =>{
    //     item.tagName.forEach((item1) =>{
    //       if (tagList.has(item1.type)) {
    //         let money = tagList.get(item1.type) + item1.money
    //         tagList.set(item1.type,money)
    //       } else {
    //         tagList.set(item1.type,item1.money)
    //       }
    //     })
    //   })
    //   list = [...tagList]
    //   this.$store.commit('saveTagPayList',list)
    // }
  }
}
</script>

<style lang="less" scoped>
.van-number-keyboard {
  padding-bottom: 0px
}
.type {
  width: 100%;
  text-align: center;
  color: #1041FF;
}
.payTag {
  display: flex;
  flex-flow: wrap;
  height: 24vh;
  //border: #011a06 solid 1px;
  border-bottom: #ebedf0 1px solid;
  overflow: scroll;
  div {
    display: flex;
    flex-flow: column;
    width: 25%;
    height: 12vh;
    line-height: 6vh;
    text-align: center;
    span:nth-child(1){
      line-height: 5vh;
      font-size: 3.5vh;
    }
  }
  div:hover {
    border: #0073ff solid 2px;
  }
}
.van-cell {
  border-bottom: #ebedf0 1px solid;
}
</style>
